<template>
	<div>
		<div class="floating-button" :style="buttonStyle" @mousedown="startDrag" @mouseup="handleMouseUp"
			@mouseleave="stopDrag" @touchstart="startDrag" @touchend="handleTouchEnd" @touchcancel="stopDrag"
			@click="handleClick">
			<slot>
				<!-- 默认按钮内容 -->
			</slot>
		</div>
		<!-- <el-drawer title="我是标题" :visible.sync="dialogVisible" :direction="direction" :with-header="false">
			<span>我来啦!</span>
		</el-drawer> -->
		<u-popup v-model="dialogVisible" length="100%" mode="top" :closeable="true">
			<AiViewVue :listItem="listItem" title="智能AI" :type="0"></AiViewVue>
		</u-popup>
	</div>
</template>

<script>
	import AiViewVue from './AiView.vue';
	const listItem = [{
		active: false,
		name: "排班",
		describe: '#afddff'
	}, {
		active: false,
		name: "查询身份证号为510124198110251429的患者信息",
		describe: '#e4ffd5'
	}, {
		active: false,
		name: "智能问诊",
		describe: '#ffe9ff'
	}, {
		active: false,
		name: "智能问诊",
		describe: '#fff9f3'
	}, {
		active: false,
		name: "智能问诊",
		describe: '#efffe1'
	}]
	export default {
		name: 'TransitionButton',
		data() {
			return {
				direction: "btt",
				// 按钮位置
				x: 80,
				y: 200,
				// 拖动状态
				isDragging: false,
				// 拖动起始位置
				startX: 0,
				startY: 0,
				// 元素初始偏移
				offsetX: 0,
				offsetY: 0,
				// 按钮尺寸
				buttonWidth: 50,
				buttonHeight: 50,
				// 动画状态
				transitioning: false,
				// 新增：记录拖动距离
				dragDistance: 0,
				// 新增：点击阈值（像素）
				clickThreshold: 5,
				// 新增：是否应该触发点击
				shouldTriggerClick: true,
				dialogVisible: false,
				listItem: listItem,
			};
		},
		computed: {
			// 按钮样式计算
			buttonStyle() {
				return {
					left: `${this.x}px`,
					top: `${this.y}px`,
					width: `${this.buttonWidth}px`,
					height: `${this.buttonHeight}px`,
					transition: this.transitioning ? 'left 0.3s ease-out' : 'none'
				};
			},
		},
		components: {
			AiViewVue
		},
		methods: {
			// 开始拖动
			startDrag(e) {
				// 区分鼠标和触摸事件
				const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
				const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;

				this.isDragging = true;
				this.transitioning = false;
				this.dragDistance = 0;
				this.shouldTriggerClick = true;
				// 记录初始位置和偏移量
				this.startX = clientX;
				this.startY = clientY;
				this.offsetX = clientX - this.x;
				this.offsetY = clientY - this.y;

				// 添加鼠标移动监听
				// document.addEventListener('mousemove', this.handleDrag);
				// document.addEventListener('touchmove', this.handleDrag);
				document.addEventListener('mousemove', this.handleDrag, {
					passive: false
				});
				document.addEventListener('touchmove', this.handleDrag, {
					passive: false
				});
			},

			// 处理拖动
			handleDrag(e) {
				if (!this.isDragging) return;

				// 防止拖动时选中文本或触发其他事件
				// e.preventDefault();
				if (e.cancelable) {
					e.preventDefault();
				}
				// 获取当前位置
				const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
				const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;

				// 计算移动距离
				const moveX = Math.abs(clientX - this.startX);
				const moveY = Math.abs(clientY - this.startY);
				this.dragDistance = Math.sqrt(moveX * moveX + moveY * moveY);

				// 如果移动距离超过阈值，认为是拖动，不触发点击
				if (this.dragDistance > this.clickThreshold) {
					this.shouldTriggerClick = false;
				}

				// 计算新位置
				let newX = clientX - this.offsetX;
				let newY = clientY - this.offsetY;

				// 限制在屏幕内
				const windowWidth = window.innerWidth;
				const windowHeight = window.innerHeight;

				// X轴限制
				newX = Math.max(0, Math.min(newX, windowWidth - this.buttonWidth));
				// Y轴限制
				newY = Math.max(0, Math.min(newY, windowHeight - this.buttonHeight));

				// 更新位置
				this.x = newX;
				this.y = newY;
			},

			// 停止拖动
			stopDrag() {
				if (!this.isDragging) return;

				this.isDragging = false;
				// 移除事件监听
				// document.removeEventListener('mousemove', this.handleDrag);
				// document.removeEventListener('touchmove', this.handleDrag);
				document.removeEventListener('mousemove', this.handleDrag, {
					passive: false
				});
				document.removeEventListener('touchmove', this.handleDrag, {
					passive: false
				});
				// 自动贴向最近的边缘
				this.snapToEdge();
			},

			// 贴向边缘
			snapToEdge() {
				this.transitioning = true;
				const windowWidth = window.innerWidth;
				// 计算距离左右两边的距离
				const distanceToLeft = this.x;
				const distanceToRight = windowWidth - this.x - this.buttonWidth;

				// 贴向较近的一边
				this.x = distanceToLeft < distanceToRight ? 0 : windowWidth - this.buttonWidth;
			},
			handleMouseUp() {
				this.stopDrag();

				// 只有在应该触发点击时才传递事件
				// if (this.shouldTriggerClick) {
				//     this.$emit('click', e);
				// }
			},
			handleTouchEnd() {
				this.stopDrag();

				// 只有在应该触发点击时才传递事件
				// if (this.shouldTriggerClick) {
				//     this.$emit('click', e);
				// }
			},
			// 点击处理函数
			handleClick(e) {
				// 如果是拖动操作，不执行点击逻辑
				if (!this.shouldTriggerClick) {
					e.stopPropagation();
					e.preventDefault();
					return;
				}
				this.dialogVisible = !this.dialogVisible
				// 执行点击逻辑
				// this.$emit('click', e);
			}
		},
		mounted() {
			// 初始化位置 - 右下角
			this.x = window.innerWidth - this.buttonWidth;
			this.y = window.innerHeight - this.buttonHeight - 60;
		}
	};
</script>

<style scoped>
	.ai-body {
		background: linear-gradient(to bottom, #e0f9ff, #eaf9fd);
	}

	.floating-button {
		position: fixed;
		/* width: 50px; */
		/* height: 50px; */
		border-radius: 50%;
		/* background-color: #42b983; */
		background-image: url('/static/ai/ai.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* Vue 绿色 */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		cursor: grab;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 24px;
		z-index: 9999;
		user-select: none;
		transition: box-shadow 0.2s ease;
	}

	.floating-button:active {
		cursor: grabbing;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
	}

/* 	.content {
		padding: 24rpx;
		text-align: center;
	} */
</style>